<template>
  <WidgetBase :data="data" :clearable="!!data.value" @drop.native.stop>
    <WidgetPlaceholder
      :data="data"
      :title="fileName"
      :icon="loading ? 'el-icon-loading' : ''"
      :text="fileName || (data.isUse ? '点击上传' : '')"
      @click.native="areaClick"
    />

    <input
      v-if="data.isUse"
      ref="input"
      class="fa-widget-attachment__input"
      type="file"
      :accept="accept"
      @change="fileChange"
    />
  </WidgetBase>
</template>

<script lang="ts">
import { defineComponent, inject, ref, toRef, toRefs } from 'vue'
import { Widget } from '@/models'
import { Viewer } from '@/types'
import useUpload from './useUpload'
import WidgetBase from '@/components/widget-base/WidgetBase.vue'
import WidgetPlaceholder from '@/components/widget-base/WidgetPlaceholder.vue'

/** 附件控件 */
export default defineComponent({
  name: 'FaWidgetAttachment',

  components: { WidgetBase, WidgetPlaceholder },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    const data = toRef(props, 'data')
    const viewer = inject('Viewer') as Viewer

    return useUpload({
      data,
      viewer: ref(viewer)
    })
  }
})
</script>

<style lang="scss">
.fa-widget-attachment {
  &.widget-mode-use {
    cursor: pointer;
  }

  .el-tooltip {
    display: block;
    outline: none;
  }

  &__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }
}
</style>
